<template>
	<view>
		<checkbox-group @change="checkboxChange">
			<view class="cu-form-group" v-for="(value,key) in picker" :key="key">
				<view class="title">{{value.value}}</view>
				<checkbox :class="value.checked?'checked':''" :checked="value.checked" :value="pickerValue[key]"></checkbox>
			</view>
		</checkbox-group>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex';
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				picker: [],
				pickerValue:[],
				index:""
			};
		},
		computed:{
			...mapState(["HOST_URL", "sessionId"])
		},
		mounted() {
			this.getDictValue();
		},
		watch:{
			value(){
				if(this.value == ""){
					this.picker.forEach((val, ind)=>{
						this.$set(this.picker[ind],"checked",false);
					})
				} else {
					for(let i=0;i<this.picker.length;i++){
						if(this.value.indexOf(this.pickerValue[i]) != -1){
							this.$set(this.picker[i],"checked",true);
						} else {
							this.$set(this.picker[i],"checked",false)
						}
					}	
				}
			}
		},
		methods: {
			...mapActions(["JAjax"]),
			PickerChange(e) {
				this.index = e.detail.value
			},
			checkboxChange(val){
				let res = val.detail.value.join(",");
				for(let i=0;i<this.picker.length;i++){
					if(res.indexOf(this.pickerValue[i]) != -1){
						console.log(true);
						this.$set(this.picker[i],"checked",true);
					} else {
						this.$set(this.picker[i],"checked",false)
					}
				}
				this.$emit('input', res);
				this.$emit('change', res);
			},
			getDictValue(){
				this.JAjax({
					url: '/a/sys/dictData/listData?dictType=' + this.dict,
					success: data=>{
						if (data.statusCode == 200 && data.data) {
							this.picker = []
							for (var i = 0; i < data.data.length; i++) {
								this.picker.push({value:data.data[i].dictLabel,checked:false})
								this.pickerValue.push(data.data[i].dictValue)
							}
						}
					}
				});
			}
		},
		props: {
			dict: {
				type: String,
				default: ''
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},
			bgImage: {
				type: String,
				default: ''
			},
			value: {
				type: String,
				default: ''
			}
		}
	}
</script>

<style>
</style>